<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
    <title>红旅动漫</title>
    <link rel="stylesheet/less" href="./css/reset.less">
    <link rel="stylesheet/less" href="./css/index.less">

</head>

<body>
    <!-- 菜单容器 -->
    <div id="meun-content" class="hide">
        <div id="exit">X</div>
        <div class="logo"><img src="./images/logo.png" alt=""></div>
        <ul>
            <li><a href="./index.html">
                    <div>一周更新</div>
                    <div>&gt;</div>
                </a>
            </li>
            <li><a href="./item2.html">
                    <div>最新更新</div>
                    <div>&gt;</div>
            </li></a>

            <li>
                <a href="./shimban.html">
                    <div>热门新番</div>
                    <div>&gt;</div>
                </a>
            </li>
            <li>
                <a href="./serialize.html">
                    <div>连载动漫</div>
                    <div>&gt;</div>
                </a>
            </li>
            <li>
                <a href="./item.html">
                    <div>完结动漫</div>
                    <div>&gt;</div>
                </a>
            </li>
            <li>
                <a>
                    <div>新闻列表</div>
                    <div>&gt;</div>
                </a>
            </li>
            <li>
                <a href="./list.html">
                    <div>榜单资讯</div>
                    <div>&gt;</div>
                </a>
            </li>
            <li>
                <a>
                    <div>专题列表</div>
                    <div>&gt;</div>
                </a>
            </li>
            <li>
                <a>
                    <div>关于</div>
                    <div>&gt;</div>
                </a>
            </li>
        </ul>
    </div>
    <!-- 头部 -->
    <div class="head">
        <div id="meun">
            <img src="./images/menu.png" alt="">
        </div>
        <div class="maintitle">红旅动漫</div>
        <div class="search"><input type="search" name="search" id=""></div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="carousel">
            <div class="img">
                <img src="./images/banner.jpg" alt="">
                <div class="shade">红旅动漫资源分享群开放啦！！！</div>
            </div>
            <div class="img">
                <img src="./images/banner02.jpg" alt="">
                <div class="shade">红旅公众号开始更新动漫资讯啦！！！</div>
            </div>
            <div class="img">
                <img src="./images/banner3.jpg" alt="">
                <div class="shade">红旅动漫资源分享群开放啦！！！</div>
            </div>
            <div class="img">
                <img src="./images/banner04.jpg" alt="">
                <div class="shade">每月都来给红旅打赏下吧！！！</div>
            </div>
        </div>

    </div>

    <div class="title-content">
        <nav id="nav-box">
            <div class="item navactive">新增连载</div>
            <div class="item">新增完结</div>
            <div class="item">推荐连载</div>
            <div class="item">推荐完结</div>
        </nav>
        <div class="content" id="content">
            <div class="item active">
                <div><img src="./images/ange vierge.jpg" alt="">Ａｎｇｅ　Ｖｉｅｒｇｅ</div>
                <div><img src="./images/heianzhihun.jpg" alt="">黑暗之魂３</div>
                <div><img src="./images/ange vierge.jpg" alt="">Ａｎｇｅ　Ｖｉｅｒｇｅ</div>
                <div><img src="./images/xzlz4.jpg" alt="">从零开始的异世界生活</div>
            </div>
            <div class="item">
                <div><img src="./images/lnbfb.jpg" alt="">灵能百分百</div>
                <div><img src="./images/rijishaonv.jpg" alt="">日记少女</div>
                <div><img src="./images/xzwz03.jpg" alt="">Ａｎｇｅ　Ｖｉｅｒｇｅ</div>
                <div><img src="./images/xzwj04.jpg" alt="">黑暗之魂３</div>
            </div>
            <div class="item">
                <div><img src="./images/jdzsgd.jpg" alt="">机动战士敢达</div>
                <div><img src="./images/heianzhihun.jpg" alt="">剧场版 OVA</div>
                <div><img src="./images/tjlz03.jpeg" alt="">Ａｎｇｅ　Ｖｉｅｒｇｅ</div>
                <div><img src="./images/tjlz04.jpeg" alt="">黑暗之魂３</div>
            </div>
            <div class="item">
                <div><img src="./images/jjdjr.jpg" alt="">进击的巨人</div>
                <div><img src="./images/djsy.png" alt="">刀剑神域</div>
                <div><img src="./images/zewg.jpg" alt="">罪恶王冠</div>
                <div><img src="./images/hzw.jpg" alt="">海贼王</div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./js/less.js"></script>
<script src="./js/common.js"></script>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $('#nav-box .item').click(function () {

        // 获取索引
        var index = $(this).index()

        $(this).addClass('navactive').siblings().removeClass('navactive')

        // eq => 匹配索引值 链式操作 => 面向对象编程
        $('#content .item').eq(index).addClass('active').siblings().removeClass('active')

    })
    // 点击左上角展开菜单
    $('#meun').click(function () {
        $('#meun-content').addClass('show').removeClass('hide')
        // 禁止页面滚动
        $(document.body).toggleClass("html-body-overflow");
    })
    // 点击菜单右上角退出菜单
    $('#exit').click(function () {
        $('#meun-content').addClass('hide').removeClass('show')
        // 启用页面滚动
        $(document.body).toggleClass("html-body-overflow");
    })


</script>